<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix header">
                <span>班级管理 / </span>
                <i>班级信息列表</i>
                <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <div class="text item">
                <el-table :data="classesData" style="width: 100%">
                    <!-- 班级编号 -->
                    <el-table-column label="班级编号" width="180">
                        <template slot-scope="scope">
                            <!-- <i class="el-icon-time"></i> -->
                            <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
                        </template>
                    </el-table-column>
                    <!-- 班级名称 -->
                    <el-table-column label="班级名称" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- 所属专业 -->
                    <el-table-column label="所属专业" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.subjectsId ? scope.row.subjectsId.name : '暂无数据'}}
                                    </el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- 任课老师 -->
                    <el-table-column label="任课老师" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.teacher ? scope.row.teacher.name : '暂无数据'}}
                                    </el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- 班级人数 -->
                    <el-table-column label="班级人数" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.teacher ? scope.row.teacher.name : '暂无数据'}}
                                    </el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- 开班时间 -->
                    <el-table-column label="开班时间" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.time ? scope.row.time.name : '暂无数据'}}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- 班级信息的操作 -->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                    <!-- <span class="demonstration">完整功能</span> -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="1" :page-sizes="[3, 5, 7, 9]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {
        createNamespacedHelpers
    } from 'vuex';
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers('Classes');


    export default {
        data() {
            return {
                classesData: [],
            }
        },
        computed: {
            ...mapState(['total', 'pageSize', 'currentPage', 'pages']),
        },
        methods: {
            ...mapActions(['getClasses', 'deleteClasses']),
            ...mapMutations(['setPageSize', 'setCurrentPage']),
            //------------------------------------获取班级信息，列表渲染---------------------------------
            async getclassesList() {
                const data = await this.getClasses();
                // console.log(data)
                if (data.code) {
                    this.classesData = data.data.result
                }
            },
            //--------------------------------------修改班级信息----------------------------------
            handleEdit(index, row) {
                // console.log(index, row);
                this.$message({
                    message: '暂无此功能',
                    type: 'success'
                });
            },
            //--------------------------------------删除班级信息----------------------------------
            async handleDelete(index, row) {
                const data = await this.deleteClasses(row._id);
                if (data.code) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.getclassesList();
                } else {
                    this.$message({
                        message: '班级数据删除失败，该班级中还有学生！',
                        type: 'success'
                    });
                }
            },
            //-------------------------------每页显示几条班级数据--------------------------------
            handleSizeChange(val) {              
                this.setPageSize(val);
                this.getclassesList();
            },
            //--------------------------------选择当前页数---------------------------------------
            handleCurrentChange(val) {
                this.setCurrentPage(val);
                this.getclassesList();
            }
        },
        mounted() {
            this.getclassesList();
        },
    }
</script>

<style scoped>
    .header {
        text-align: left;
        font-size: 14px;
    }

    .header span {
        color: #777;
        padding: 0 10px;
        cursor: pointer;
    }

    .header i {
        color: black;
        font-weight: 600;
        cursor: pointer;

    }
</style>